<template>
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottm" @top-status-change="handleTopChange" ref="loadmore">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
    </div>
  </mt-loadmore>
</template>
<script>
  export default {
    data() {
      return {
      	list:[1,2,3,4,5,6],
        topStatus: '',
        // ...
      };
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
        console.log(this.status);
      },
      loadTop() {
      	console.log('下拉触发');
      	this.$ref.loadmore.onTopLoaded();
      	
      },
      loadBottm() {
      	console.log('上拉触发');
      	// 注释以后会卡住
      	// this.$ref.loadmore.BottomLoaded();
      	// 正确方式是给list加元素，直到加满为止
      }
      // ...
    },
    // ...
  };
</script>